<template>
  <div class="space-y-4">
    <div class="space-y-2 flex flex-col">
      <label class="block text-sm font-medium text-gray-700">
        Text Content
      </label>
      <input
          type="text"
          :value="currentText"
          @input="handleTextChange"
          class="w-auto px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
      />
    </div>

    <div class="space-y-2">
      <label class="block text-sm font-medium text-gray-700">
        Font Family
      </label>
      <select
          :value="currentFont"
          @change="onFontChange($event.target.value)"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
      >
        <option
            v-for="font in fonts"
            :key="font"
            :value="font"
            :style="{ fontFamily: font }"
        >
          {{ font }}
        </option>
      </select>
    </div>

    <div class="space-y-2">
      <label class="block text-sm font-medium text-gray-700 mb-2">
        Color
      </label>
      <el-button
          @click="colorSelect(true)"
          size="small"
          class="w-full p-2 border border-gray-300 rounded-md hover:bg-gray-50"
      >
        <div class="w-full flex items-center space-x-2">
          <div
              class="w-6 h-6 rounded-full border border-gray-200"
              :style="{
            backgroundColor: currentColor,
            boxShadow: currentColor === '#FFFFFF' ? 'inset 0 0 0 1px #E5E7EB' : undefined
          }"
          />
          <span class="text-sm text-gray-700">{{ getColorName(currentColor) }}</span>
        </div>
      </el-button>
    </div>

    <div class="space-y-2">
      <div class="flex items-center justify-between">
        <label class="text-sm font-medium text-gray-700">
          Outline
        </label>
        <button
            type="button"
            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
            :class="showOutline ? 'bg-indigo-600' : 'bg-gray-200'"
            role="switch"
            :aria-checked="showOutline"
            @click="handleOutlineToggle(!showOutline)"
        >
          <span
              class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
              :class="showOutline ? 'translate-x-5' : 'translate-x-0'"
          />
        </button>
      </div>

      <div v-if="showOutline" class="mt-4 space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            Width
          </label>
          <input
              type="range"
              :value="currentOutlineWidth"
              @input="onOutlineChange($event.target.value, currentOutlineColor)"
              min="0"
              max="20"
              step="0.5"
              class="w-full"
          />
          <div class="text-right text-sm text-gray-500">
            {{ currentOutlineWidth }}px
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            Color
          </label>
          <el-button
              size="small"
              @click="colorSelect(false)"
              class="w-full p-2 border border-gray-300 rounded-md hover:bg-gray-50"
          >
            <div class="w-full flex items-center space-x-2">
              <div
                  class="w-6 h-6 rounded-full border border-gray-200"
                  :style="{
                backgroundColor: currentOutlineColor,
                boxShadow: currentOutlineColor === '#FFFFFF' ? 'inset 0 0 0 1px #E5E7EB' : undefined
              }"
              />
              <span class="text-sm text-gray-700">{{ getColorName(currentOutlineColor) }}</span>
            </div>
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog
        :title="isText? 'Choose Text Color' : 'Choose Outline Color'"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div class="bg-white rounded-lg p-6 w-auto">
        <div class="grid grid-cols-5 gap-3">
          <div
              v-for="{ hex, name } in COLORS"
              :key="name"
              @click="handleColorChange(hex)"
              class="w-10 h-10 rounded-full border-2 transition-transform hover:scale-110"
              :class="hex === currentColor ? 'border-blue-500 scale-110' : 'border-gray-200'"
              :style="{
              backgroundColor: hex,
              boxShadow: hex === '#FFFFFF' ? 'inset 0 0 0 1px #E5E7EB' : undefined
            }"
              :title="name"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex";

// const fonts = [
//   'Arial',
//   'Times New Roman',
//   'Helvetica',
//   'Impact',
//   'Comic Sans MS',
//   'Georgia',
// ];

export default {
  props: {
    currentText: {
      type: String,
      required: true,
    },
    currentFont: {
      type: String,
      required: true,
    },
    currentColor: {
      type: String,
      required: true,
    },
    currentOutlineWidth: {
      type: Number,
      required: true,
    },
    currentOutlineColor: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showOutline: this.currentOutlineWidth > 0,
      showColorPicker: false,
      showOutlineColorPicker: false,
      dialogVisible: false,
      isText: true,
      fonts: [
        'Arial',
        'Times New Roman',
        'Helvetica',
        'Impact',
        'Comic Sans MS',
        'Georgia',
      ],
      COLORS: [
        { hex: '#000000', name: 'Black' },
        { hex: '#FFFFFF', name: 'White' },
        { hex: '#FF0000', name: 'Red' },
        { hex: '#00FF00', name: 'Green' },
        { hex: '#0000FF', name: 'Blue' },
        { hex: '#FFFF00', name: 'Yellow' },
        { hex: '#FF00FF', name: 'Magenta' },
        { hex: '#00FFFF', name: 'Cyan' },
        { hex: '#FFA500', name: 'Orange' },
        { hex: '#800080', name: 'Purple' },
        { hex: '#008000', name: 'Dark Green' },
        { hex: '#000080', name: 'Navy' },
        { hex: '#800000', name: 'Maroon' },
        { hex: '#808000', name: 'Olive' },
        { hex: '#008080', name: 'Teal' },
        { hex: '#FFC0CB', name: 'Pink' },
        { hex: '#A52A2A', name: 'Brown' },
        { hex: '#808080', name: 'Gray' },
        { hex: '#C0C0C0', name: 'Silver' },
        { hex: '#FFD700', name: 'Gold' }
      ],
    };
  },
  computed: {
    ...mapState('colors', ['selectColor', 'selectFont']),
  },
  created() {
    this.COLORS = this.selectColor
    this.fonts = this.selectFont
  },
  methods: {
    handleTextChange(event) {
      this.$emit('text-change', event.target.value);
    },
    onFontChange(font) {
      this.$emit('font-change', font);
    },
    onOutlineChange(width, color) {
      this.$emit('outline-change', Number(width), color);
    },
    handleOutlineToggle(enabled) {
      this.showOutline = enabled;
      if (!enabled) {
        this.onOutlineChange(0, this.currentOutlineColor);
      } else {
        this.onOutlineChange(1, this.currentOutlineColor);
      }
    },
    getColorName(hex) {
      const color = this.COLORS.find(c => c.hex === hex);
      return color ? color.name : 'Custom';
    },
    colorSelect(isText) {
      this.isText = isText;
      this.dialogVisible = true;
    },
    handleColorChange(hex) {
      this.isText ? this.$emit('color-change', hex) : this.onOutlineChange(this.currentOutlineWidth, hex);
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false;
    }
  },
};
</script>